<template>
	
	<!-- <view class="box">
		<view class="singer">
			<view class="radius singerImg" style="width: 300rpx;height: 300rpx;overflow: hidden;">
				<image style="width: 100%;height: 100%;" src="http://p2.music.126.net/wldFtES1Cjnbqr5bjlqQbg==/18876415625841069.jpg?param=130y130" mode=""></image>
			</view>
		</view>
		<view class="music">
				<h2 class="title">赵雷-画</h2>
				<view class="player">
					<view class="btns">
						<view class="row-center col">
							<text class="iconfont iconshangyishou">
							</text>
						</view>
						<view class="row-center col" @click="audioPlay(isPlay)" >
							<text class="iconfont iconbofangzanting" :class="isPlay? 'iconbofangzanting':'icon24gf-play'">
							</text>
						</view>
						<view class="row-center col">
							<text class="iconfont iconxiayishou">
							</text>
						</view>
					</view>
				</view>
			</view>
	</view> -->
</template>
 
<script>
	    export default {
	        data() {
	            return {
					audio:null,
					src: 'https://m801.music.126.net/20221126190804/7dd12386a1c62aa997b0cc5822f40891/jdyyaac/0652/045c/5659/18391eb6c636244a5179a305116d7a35.m4a',
					isPlay:false
				}
	        },
			mounted() {
				this.audio = wx.createInnerAudioContext()
				this.playHandler()
				this.pauseHandler()
			},
	        methods: {
				audioPlay(isPlay){
					this.audio.src = this.src
					setTimeout(()=>{
						this.isPlay? this.audio.pause() : this.audio.play()
					},200)
					
				},
				audioPause(){
					
				},
				playHandler(){
					this.audio.onPlay(()=>{
						this.isPlay = true
						this.$emit('playHandler','音频')
					}) 
				},
				// 暂停事件触发
				pauseHandler(){
					this.audio.onPause(()=>{
						console.log('触发了音频的暂停回调');
						this.$emit('pauseHandler',{type:'音频',currentTime:this.currentTime,totalTime:this.totalTime})
						this.isPlay = false
					})
				}, 
	           
	        },
	       
	    }
</script>

<style lang="scss" scoped>
.box{
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
} 
.singer{
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.singerImg{
		box-shadow: -10rpx -10rpx 15rpx#fff,
			            10rpx 10rpx 15rpx rgba(0,0,0,0.1),
			            inset -5rpx -5rpx 15rpx #fff,
			            inset 5rpx 5rpx 15rpx rgba(0,0,0,0.1) ;
	}
	
}
.music{
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	font-family: Arial, Helvetica, sans-serif;
}

.title {
    font-weight: 400;
    font-size: 20rrpx;
    color:coral;
    text-align: center;
    margin-bottom: 20rrpx;
}

.player {
    position: relative;
    width: 500rpx;
    background:#fbfbfb;
    border: 2rpx solid #fff;
    border-radius: 80rpx;
    padding: 20rpx 30rpx;
    box-shadow: -10rpx -10rpx 15rpx#fff,
                10rpx 10rpx 15rpx rgba(0,0,0,0.1),
                inset -5rpx -5rpx 15rpx #fff,
                inset 5rpx 5rpx 15rpx rgba(0,0,0,0.1) ;
}

.btns {
    /* position: relative; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* background: red; */

}
.btns view {
    position: relative;
    width: 80rpx;
    height:80rpx;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    cursor: pointer;
    box-shadow: inset 0 -5rpx 5rpx rgba(0,0,0,0.1),
                      0 5rpx 10rpx rgba(0,0,0,0.1),
                      0 10rpx 15rpx rgba(0,0,0,0.1);

}
.btns view:active,
.btns view.active
 {
    color:coral;
    box-shadow: inset 0 -2rpx 5rpx rgba(0,0,0,0.15),
                inset 0 2rpx 5rpx rgba(0,0,0,0.15);
}

.btns .playPause {
    height: 100rpx;
    width: 100rpx;

}
.text{
	font-size: 30rpx;
}

</style>
